import React, { Component } from 'react'
import { Text, StyleSheet, View ,ScrollView, Platform } from 'react-native'

export default class ScrollViews extends Component {
  render() {
    return (
    <View>
        <ScrollView
            style={{backgroundColor: '#dfb',marginTop:60}}
            horizontal={true}
            showsHorizontalScrollIndicator={false}>
            <Text style={[styles.nav]}>新闻</Text>
            <Text style={[styles.nav]}>图片</Text>
            <Text style={[styles.nav]}>视频</Text>
            <Text style={[styles.nav]}>音乐</Text>
            <Text style={[styles.nav]}>其他</Text>
            <Text style={[styles.nav]}>设置</Text>
            <Text style={[styles.nav]}>关于</Text>
            <Text style={[styles.nav]}>退出</Text>
        </ScrollView>
        <ScrollView style={[styles.container]}
                contentContainerStyle={{margin:15}}
                showsVerticalScrollIndicator={false}>
            <Text style={[styles.text]}>昏暗潮湿的矿道中，陆叶背着矿篓，手中提着矿镐，一步步朝前行去。</Text>
            <Text style={[styles.text]}>少年的表情有些忧伤，双目聚焦在面前的空处，似在盯着什么东西。</Text>
            <Text style={[styles.text]}>外人看来，陆叶前方空无一物，但实际上在少年的视野中，却能看到一个半透明的影子。</Text>
            <Text style={[styles.text]}>那像是一棵树的影子，灰蒙蒙的，叫人看不真切，枝叶繁茂，树杈从树身三分之一的位置朝左右分开，支撑起一个半圆形的树冠。</Text>
            <Text style={[styles.text]}>来到这个叫九州的世界已经一年多时间，陆叶至今没搞明白这到底是什么东西，他只知道当自己的注意力足够集中的时候，这棵影子</Text>
            <Text style={[styles.text]}>“真是悲催的人生。”少年一声叹息</Text>
            <Text style={[styles.text]}>一年前，他突兀地在这个陌生的世界醒来，还不等他熟悉下环境，所处的势力便被一伙贼人攻占了，很多人被杀，他与另外一些年轻的男女成了那伙贼人的俘虏，然后被送进了这处矿脉，成为一名低贱的矿奴。</Text>
            <Text style={[styles.text]}>事后他才从旁人的零散交谈中得知，他所处的势力是隶属浩天盟，一个叫做玄天宗的宗门。</Text>
            <Text style={[styles.text]}>这个宗门的名字听起来炫酷狂霸，但实际上只是个不入流的小宗门。</Text>
            <Text style={[styles.text]}>攻占玄天宗的，是万魔岭麾下的邪月谷。</Text>
            <Text style={[styles.text]}>浩天盟，万魔岭，是这个世界的两大阵营组织，俱都由无数大小势力联合形成，互相倾轧拼斗，意图彻底消灭对方，据说已经持续数</Text>
            <Text style={[styles.text]}>在陆叶看来，这样的争斗简单来说就是守序阵营与邪恶阵营的对抗，他只是不小心被卷入了这样的对抗大潮中。</Text>
            {/* 解决scrollview 底部问题 */}
            <View style={{height: Platform.OS === 'ios' ? 0 : 180}}></View>
        </ScrollView>
    </View>
    )
  }
}

const styles = StyleSheet.create({
    text: {
        fontSize: 26
    },
    container:{
        backgroundColor: '#f5f5f5',
    },
    nav:{
        margin: 10,
        height: 40,
        fontSize: 20,
    }
})

